<script setup lang="ts">
import type {SupportedLanguagesType} from '@/locales/effects';

import {SUPPORT_LANGUAGES} from '@/constants';
import {Languages} from '@/plugins/iconify';
import {loadLocaleMessages} from '@/locales/effects';
import {preferences, updatePreferences} from '@/preferences/effects';
import {JcxDropdownRadioMenu, JcxIconButton} from '@/components/common/shadcn';

defineOptions({
  name: 'LanguageToggle',
});

async function handleUpdate(value: string) {
  const locale = value as SupportedLanguagesType;
  updatePreferences({
    app: {
      locale,
    },
  });
  await loadLocaleMessages(locale);
}
</script>

<template>
  <div>
    <JcxDropdownRadioMenu
        :menus="SUPPORT_LANGUAGES"
        :model-value="preferences.app.locale"
        @update:model-value="handleUpdate"
    >
      <JcxIconButton>
        <Languages class="text-foreground size-4"/>
      </JcxIconButton>
    </JcxDropdownRadioMenu>
  </div>
</template>
